import React, { Suspense, lazy, useState } from 'react'
import { icons } from './assets/font'
import { WebTest } from './WebTest'
// import { UIEditor } from './UIEditor'

export const pages: {
  [x: string]: {
    label?: string
    icon?: string
    title: string
  }
} = {
  webrtc: {
    title: 'Electron Web',
    icon: icons.webrtc
  },
  linker: {
    title: '超链接记录',
    icon: icons.linker
  },
  logs: {
    title: '文本查看',
    icon: icons.rizhi
  },
  // ui: {
  //   title: 'UI 设计器',
  //   label: 'UI'
  // },
  cpp: {
    title: 'C++ Code',
    label: 'C++'
  }
}

export type PagesKeys = keyof typeof pages

export function RenderPage(page?: PagesKeys): React.ReactNode {
  switch (page) {
    case 'linker':
      return <AsyncLinkerBoard />
    case 'webrtc':
      return <WebTest />
    case 'logs':
      return <AsyncLogsViewer />
    // case 'ui':
    //   return <UIEditor />
    case 'cpp':
      return <AsyncCppCode />
    default:
      return null
  }
}

const AsyncLinkerBoard = lazy(() => import('./LinkerBoard'))
const AsyncLogsViewer = lazy(() => import('./LogsViewer'))
const AsyncCppCode = lazy(() => import('./CppCode'))

export function AsyncRenderPage(props: { page?: PagesKeys }) {
  return <Suspense fallback={<div>loading...</div>}>{RenderPage(props.page)}</Suspense>
}

export function PageIs(props: { className?: string; is: PagesKeys; page?: PagesKeys }) {
  const [inited, setInited] = useState(false)
  if (props.page === props.is && !inited) {
    setInited(true)
  }
  return (
    <div
      className={props.className}
      style={{ display: props.page === props.is ? 'block' : 'none' }}
    >
      {inited && <AsyncRenderPage page={props.is} />}
    </div>
  )
}
